<template>
	<view >
		<!-- 轮播 -->
		<swiper style="width: 750rpx;height: 250rpx;" indicator-active-color="#ffffff" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<image style="width: 750rpx;height: 250rpx;" src="/static/demo/banner/1.jpg" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image style="width: 750rpx;height: 250rpx;" src="/static/demo/banner/2.jpg" mode=""></image>
			</swiper-item>
		</swiper>
		<!-- 列表 -->
		<view class="flex flex-wrap" >
			<view @click="openDetail(item.id)" v-if="list.length" v-for="(item,index) in list" :key="index" class="list-item position-relative">
				
				<image style="width: 365rpx;height: 365rpx;" class="rounded" :src="item.cover?item.cover:'/static/demo/1.jpg'" mode="aspectFill"></image>
				<view class="rounded-circle px-1 top-15 left-15 flex align-center position-absolute" style="background-color: rgba(0,0,0,0.4);">
					<text class="iconbizhongguanli iconfont mr-1 font text-warning"></text>
					<text class="font text-white">{{item.coin}}</text>
				</view>
				<view class="rounded-circle top-15 px-1 right-15 flex align-center position-absolute" style="background-color: rgba(0,0,0,0.4);">
					<text class="font-sm text-warning">人气：</text>
					<text class="font font-sm text-white">{{item.look_count}}</text>
				</view>
				<view class="rounded-circle bottom-15 left-15 flex align-center position-absolute" >
					<text class="font-sm text-white">{{item.title}}</text>
				</view>
				<view class="rounded-circle px-1 bottom-15 right-15 flex align-center position-absolute" style="background-color: rgba(0,0,0,0.4);">
					<text :class="status[item.status].bg"  class="rounded-circle mr-1" style="width: 20rpx;height: 20rpx;"></text>
					<text class="font-sm text-white">{{status[item.status].name}}</text>
				</view>
			</view>
			<!-- 默认样式 -->
			<view v-if="list.length===0" class="flex w-100 align-center justify-center text-secondary" style="height: 100rpx;">
				暂无数据
			</view>
			<view v-if="list.length>=10" class="flex align-center justify-center py-3 bg-light">
				<text class="text-muted font">{{loadtext}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				list:[],
				loadtext:'上拉加载更多',
				status:{
					0:{
						name:'未开播',
						bg:'bg-warning'
					},
					1:{
						name:'直播中',
						bg:'bg-success'
					},
					2:{
						name:'暂停中',
						bg:'bg-primary'
					},
					3:{
						name:'已结束',
						bg:'bg-danger'
					},
				},
				page:1
			}
		},
		filters:{
			formatStatus(value){
				return this.status[value].name
			}
		},
		onLoad() {
			this.getData()
		},
		onPullDownRefresh() {
			this.page=1
			this.getData().then(res=>{
				uni.showToast({
					title:'刷新成功',
					icon:'none'
				})
				uni.stopPullDownRefresh()
			}).catch(err=>{
				uni.showToast({
					title:'刷新失败',
					icon:'none'
				})
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			if(this.loadtext!=='上拉加载更多'){
				return
			}
			this.page+=1
			this.getData().catch(err=>{
				this.page-=1
				this.loadtext="上拉加载更多"
			})
		},
		methods: {
			getData(){
				this.loadtext='加载中...'
				return this.$H.get(`/live/list/${this.page}`).then(res=>{
					this.list=this.page===1?res:[...this.list,...res],
					this.loadtext=this.page*10===this.list.length?'上拉加载更多':'没有更多啦'
				})
			},
			openDetail(id){
				uni.navigateTo({
					url:`../live/live?id=${id}`
				})
			}
		}
	}
</script>

<style>
	.list-item{
		width: 375rpx;height: 375rpx;padding:5rpx;box-sizing: border-box;
	}
	
</style>
